import { lazy } from 'react'
//ui
const Button = lazy(() => import('@/views/button'))
const Modal = lazy(() => import('@/views/modal'))
const Typography = lazy(() => import('@/views/typography'))
const Grid = lazy(() => import('@/views/grid'))
const Breadcrumb = lazy(() => import('@/views/breadcrumb'))
const Dropdown = lazy(() => import('@/views/dropdown'))
const Pagination = lazy(() => import('@/views/pagination'))
const Steps = lazy(() => import('@/views/steps'))
const AutoComplete = lazy(() => import('@/views/autoComplete'))
const Cascader = lazy(() => import('@/views/cascader'))
const Checkbox = lazy(() => import('@/views/checkbox'))
const DatePicker = lazy(() => import('@/views/datePicker'))
const Form = lazy(() => import('@/views/form'))
const Input = lazy(() => import('@/views/input'))
const Radio = lazy(() => import('@/views/radio'))
const Select = lazy(() => import('@/views/select'))
const Card = lazy(() => import('@/views/card'))
const List = lazy(() => import('@/views/list'))
const Table = lazy(() => import('@/views/table'))
const Tab = lazy(() => import('@/views/tab'))
// hook
const UseMemo = lazy(() => import('@/views/useMemo'))
const UseEffect = lazy(() => import('@/views/useEffect'))
// feature
const PureComponent = lazy(() => import('@/views/pureComponent'))
const Control = lazy(() => import('@/views/control'))
const routes = [
  {
    name: 'ui',
    path: '/ui',
    redirect: '/ui/button',
    children: [
      {
        name: 'Button',
        path: '/ui/button',
        component: Button
      },
      {
        name: 'Modal',
        path: '/ui/modal',
        component: Modal
      },
      {
        name: 'Typography',
        path: '/ui/typography',
        component: Typography
      },
      {
        name: 'Grid',
        path: '/ui/grid',
        component: Grid
      },
      {
        name: 'Breadcrumb',
        path: '/ui/breadcrumb',
        component: Breadcrumb
      },
      {
        name: 'Dropdown',
        path: '/ui/dropdown',
        component: Dropdown
      },
      {
        name: 'Pagination',
        path: '/ui/pagination',
        component: Pagination
      },
      {
        name: 'Steps',
        path: '/ui/steps',
        component: Steps
      },
      {
        name: 'AutoComplete',
        path: '/ui/autoComplete',
        component: AutoComplete
      },
      {
        name: 'Cascader',
        path: '/ui/cascader',
        component: Cascader
      },
      {
        name: 'Checkbox',
        path: '/ui/checkbox',
        component: Checkbox
      },
      {
        name: 'DatePicker',
        path: '/ui/datePicker',
        component: DatePicker
      },
      {
        name: 'Form',
        path: '/ui/form',
        component: Form
      },
      {
        name: 'Input',
        path: '/ui/input',
        component: Input
      },
      {
        name: 'Radio',
        path: '/ui/radio',
        component: Radio
      },
      {
        name: 'Select',
        path: '/ui/select',
        component: Select
      },
      {
        name: 'Card',
        path: '/ui/card',
        component: Card
      },
      {
        name: 'List',
        path: '/ui/list',
        component: List
      },
      {
        name: 'Table',
        path: '/ui/table',
        component: Table
      },
      {
        name: 'Tab',
        path: '/ui/tab',
        component: Tab
      }
    ]
  },
  {
    name: 'hook',
    path: '/hook',
    redirect: '/hook/useMemo',
    children: [
      {
        name: 'UseMemo',
        path: '/hook/useMemo',
        component: UseMemo
      },
      {
        name: 'UseEffect',
        path: '/hook/useEffect',
        component: UseEffect
      }
    ]
  },
  {
    name: 'feature',
    path: '/feature',
    redirect: '/feature/pureComponent',
    children: [
      {
        name: 'PureComponent',
        path: '/feature/pureComponent',
        component: PureComponent
      },
      {
        name: 'Control',
        path: '/feature/control',
        component: Control
      }
    ]
  }
]
export default routes
